<template>
    <div>
        <div @click="onTrigger">
            <!-- 触发弹窗 -->
            <slot name="trigger"></slot>
        </div>
        <el-dialog
            title="选择区县代"
            append-to-body
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
            :modal="false"
        >
            <div class="select">
                <el-select v-model="value" placeholder="请选择省" class="po" @change="change1">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name ">
                    </el-option>
                </el-select>

                <el-select v-model="value2" placeholder="请选择市" class="po" @change="change2">
                    <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>

                <el-select v-model="value3" placeholder="请选择县/区" class="po" @change="change3">
                    <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                </el-select>

               <div class="an">
                <el-button style="margin-right: 20px;" @click="handleClose">取消</el-button>
                <el-button @click="confirm" type="primary">确认</el-button>
               </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { apiPostList } from '@/api/distribution/distribution'
export default {
    data() {
        return {
            dialogVisible: false,
            options: [],
            options2: [],
            options3: [],
            value: '',
            value2: '',
            value3: '',
            list: [],
            list2: [],
            list3: [],
            onList:[]
        }
    },

    created() {
        apiPostList().then(res => {
            this.options = res.list
        })
    },
    methods: {
        // 打开弹窗
        onTrigger() {
            // console.log(123)
            this.dialogVisible = true
            // console.log(this.dialogVisible);
        },
        apiPostget(e, c) {
            apiPostList({
                pid: e
            }).then(res => {
                if (c == 2) {
                    this.options2 = res.list
                } else if (c == 3) {
                    this.options3 = res.list
                }
            })
        },
        change1(e) {
            let id = e
            this.list = this.options.filter(function(item){
               return item.name == id  
           })
            this.apiPostget(this.list[0].id, 2)

        },
        change2(e) {
            let id = e
            this.list2 = this.options2.filter(function(item){
               return item.name == id  
           })
            this.apiPostget(this.list2[0].id, 3)
        },
        change3(e){
            let id = e
            this.list3 = this.options3.filter(function(item){
               return item.name == id  
           })
        },
        onDel() {
            this.options2 = []
            this.options3 = []
            this.value = ''
            this.value2 = ''
            this.value3 = ''
        },
        handleClose() {
            // console.log(this.value)
            this.onDel()
            // return
            this.dialogVisible = false
        },
        confirm(){
            // localStorage.setItem("name",'张三')
            // let acc = '123456'
            // localStorage.setItem('myData', acc);
            // return
            this.dialogVisible = false
            const lists = {
                province_id : this.list[0].id ,
                city_id : this.list2[0].id ,
                district_id : this.list3[0].id 
            }
            localStorage.setItem('myData', lists);
            this.onList = localStorage.getItem("myData")
            console.log(this.onList);
            
            const arr = {
                province:this.value,
                city:this.value2,
                district:this.value3
            }
            this.$emit('regioSelsctionList', this.onList)
            this.$emit('regioSelsctionArr',arr)
        }
    }
}
</script>

<style lang="scss" scoped>
.inputs {
    height: 32px;
    line-height: 32px;
    padding-left: 15px;
}
.select {
    height: 200px;
    display: flex;
    flex-flow: column;
    .po {
        margin-bottom: 20px;
    }
    .an{
        display: flex;
        justify-content: center;
    }
}
</style>
